*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(220, 166, 175);
/* background-image: llinear-gradient(to bottom right, red, yellow); */
font-family: poppins;
}
body:hover{
background-color: #ef8ca3;
}
.container{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
height: 80vh;
width: 60vw;
box-shadow: inset -8px -8px 12px rgb(185,103,117),
inset 8px 8px 12px rgb(201,95,114);
border-radius: 50px;
}
.content{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
.content h1{
text-transform: uppercase;
text-align: center;
color: #c0294c;
font-family:cursive;
margin-bottom: 25px;
font-weight: bold;
font-size: 40px;
}
.inputarea{
display: flex;
margin-bottom: 5px;
margin-left: 10px;
}
.inputarea input{
width: 200px;
height: 30px;
text-align: center;
margin: 5px;
outline: none;
border: 2px solid #a22441;
padding: 20px 40px;
font-size: 20px;
border-radius: 10px;
background-color: #f6b5de;
}
#NameOne,#NameTwo{
color: rgb(183, 14, 14);
font-weight: bold;
}
a{
display: flex;
justify-content: center;
text-decoration: none;
background-color: #dc4669;
padding: 10px;
margin: 0px 6px;
color: #fff;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
border-radius: 50%;
font-family: cursive;
margin-top: 10px;
}
a:hover{
background-color: #500b1b;
}
#print{
display: flex;
justify-content: center;
background-color: #9c0629;
margin: 20px;
padding: 20px 50px;
color: #fff;
text-transform: uppercase;
font-size: 20px;
text-align: center;
font-weight: bold;
font-family: cursive;
border-radius: 5px;
}
#statement{
display: flex;
justify-content: center;
margin-top: 50px;
text-transform: uppercase;
font-size: 41px;
font-family:cursive;
}